<template>
    <div>
        <div class="wrap">
            <!-- 头部登录 -->
            <div class="heade">
                <i class="close" @click="handleClosezc()"></i>
                <h2 class="l-txt">注册</h2>
		    </div>
            <!-- 乐村淘账户登陆 -->
            <div class="login-form">
                <a href="./login" class="login-dl">乐村淘账户登录</a>
                <a href="#" class="login-zc">免费注册</a>
            </div>
            <!-- 账户密码 -->
            <div class="login-con">
                <form class="form-cur" id="logInFrom">
					<div class="f-wrapp">
						<input type="text" placeholder="注册手机号" class="username" name="username" id="username" autocomplete="off" v-model="username">
						<em class="l-line"></em>
						<input type="text" placeholder="填写短信验证码" class="username" name="username" id="username" autocomplete="off">
						<em class="l-line"></em>
		          		<input type="password" placeholder="设置登录密码(8-20字母数字组合)" class="pwd" name="password" id="userpwd" autocomplete="off" v-model="password">
						<em class="l-line"></em>
		          		<input type="password" placeholder="确认密码" class="pwd" name="password" id="userpwd" autocomplete="off">
           </div>
	          		<a href="javascript:;" class="btn-login" id="loginBtn" @click="clickregister()">注册</a>
				</form>
            </div>
        </div>
        <div class="flyregister" v-show="istrue">注册成功,即将登录</div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      istrue: false
    }
  },
  methods: {
    handleClosezc () {
      this.$router.back('./home')
    },
    clickregister () { // 存储账户信息localStorage
      const info = { name: this.username, pwd: this.password }
      localStorage.setItem('user', JSON.stringify(info))
      this.istrue = true
      this.$router.push('./login')
    }
  }
}
</script>
<style lang="scss">
    body{
        background: #f0f0f0;
    }
    .wrap{
        width: 100%;
        max-width: 720px;
        .heade{
           display:flex;
           height:50px;
           align-items: center;
           position: relative;
           background: #f0f0f0;
        .close{
            height:20px;
            width:20px;
            display: block;
            background:url("https://m.lecuntao.com/resource/images/login/close.png?lv=c5dce8706a");
            background-size:100% 100%;
            position: absolute;
            left: 10px;
        }
        .l-txt{
            font-size: 18px;
            margin:0px auto;
            font-weight: normal;
            line-height: 100%;
        }
     }
        .login-form{
            width: 90%;
            height: 40px;
            margin:0 auto;
            font-size: 14px;
            border-radius: 5px;
            margin-bottom: 20px;
            overflow: hidden;
            border: 0.02rem solid #f81234;
            line-height: 0.8rem;
            text-align: center;
            .login-dl{
                color: #333;
                height: 100%;
                width:50%;
                float: left;
                text-decoration: none;
                background-color:white;
            }
            .login-zc{
                width: 50%;
                text-align: center;
                float: right;
                height: 100%;
                text-decoration: none;
                background-color:#f81234;
                color: #fff;

            }
        }
        .login-con{
            .form-cur{
                .f-wrapp{
                    border-radius: 10px;
                    background: #fff;
                    height: 160px;
                    width: 90%;
                    margin: 0px auto;
                    border:none;
                .l-line{
                    width: 94%;
                    margin-left: 3%;
                    height: 0.02rem;
                    background: #ccc;
                    display: block;
                }
                .username{
                    height: 38px;
                    border:none;
                    display: block;
                    font-size: 12px;
                    padding-left: 35px;
                    background:url("https://m.lecuntao.com/resource/images/login/icon_login.png?lv=0604d8cffe") no-repeat 10px 10px;
                    background-size:20px 20px;
                    width: 90%;
                    outline-style: none ;
                }
                .pwd{
                    border:none;
                    height: 38px;
                    display: block;
                    font-size: 12px;
                    padding-left: 35px;
                    width: 90%;
                    outline-style: none ;
                    background:url("https://m.lecuntao.com/resource/images/login/icon_lock.png?lv=3f0f2d60c4") no-repeat 10px 10px;
                    background-size:20px 20px;
                }
             }
                .btn-login{
                    width: 90%;
                    margin:0px auto;
                    color: #fff;
                    background: #f81234;
                    height: 40px;
                    font-size: 16px;
                    text-align: center;
                    line-height: 0.9rem;
                    margin-top: 0.5rem;
                    display: block;
                    border-radius: 0.08rem;
                     text-decoration: none;

                }
            }
        }
    }
     .flyregister{
        width: 200px;
        height:50px;
        background:red;
        position: fixed;
        top:40%;
        left:25%;
        font-size: 18px;
        color:white;
        border-radius:10px;
        text-align: center;
        padding-top:15px;
    }
</style>
